<template>
    <el-dialog :title="cpShowTitle" :visible.sync="dialogVisible" :close-on-click-modal="false" @close="onClose">
        <div id="print-container" v-if="this.currentPrint && this.currentPrint.supplierCode && this.currentPrint.supplierCode.length !== 0">
            <el-row type="flex" justify="center">
                <el-col :span="24" style="text-align: center;font-weight: bold;">
                    <p class="p">惠州华阳医疗器械有限公司</p>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <el-col :span="24" style="text-align: center;font-weight: bold;">
                    <p>物料标识卡</p>
                </el-col>
            </el-row>
            <el-row type="flex" justify="center">
                <div class="table-container">
    <div>
        <span>表码：JL-7.5-03-001</span>&nbsp;&nbsp;<span>版本：A</span>
        <table>
            <tr>
                <td>供应商</td>
                <td  class="td">{{ currentPrint.supplierCode }}</td>
            </tr>
            <tr>
                <td>物料编码</td>
                <td class="td">{{ currentPrint.itemCode }}</td>
            </tr>

            <tr>
                <td>物料名称</td>
                <td  class="td">{{ currentPrint.itemDescription }}</td>
            </tr>
            <tr>
                <td>物料规格</td>
                <td class="td">{{ currentPrint.itemSpecification }}</td>
            </tr>
            <tr>
                <td>来料批号</td>
                <td class="td">{{ currentPrint.lotCode }}</td>
            </tr>
            <tr>
                <td>生产批号</td>
                <td  class="td">{{ currentPrint.remark }}</td>
            </tr>
            <tr>
                <td>件数</td>
                <td class="td"><input type="text" class="input-text"></td>
            </tr>
            <tr>
                <td>总数量</td>
        <td class="td"><input type="text" class="input-text" v-model="currentPrint.businessQty"></td>
            </tr>
            <tr>
                <td>来料日期</td>
                <td class="td">{{ currentPrint.arrivalDate }}</td>
            </tr>
        </table>
        <span>表样生效日期：2013-11-08</span>
    </div>
    <!-- <el-select v-model="selectValue" placeholder="请选择">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select> -->
    <select id="mySelect" class="dropdown" @change="showSelectedValue">
        <option value="青色    PANTONE Process BlueC">1月</option>
        <option value="绿色    PANTONE 455C">2月</option>
        <option value="白色    白">3月</option>
        <option value="冰蓝色    PANTONE 2905C">4月</option>
        <option value="紫色    PANTONE 682C">5月</option>
        <option value="橘红色    PANTONE 152C">6月</option>
        <option value="深黄色    PANTONE 7406C">7月</option>
        <option value="灰色    50%黑">8月</option>
        <option value="酒绿色    PANTONE 382C">9月</option>
        <option value="粉色    PANTONE 1765C">10月</option>
        <option value="金色    PANTONE 465C">11月</option>
        <option value="靛蓝色    PANTONE 265C" >12月</option>
    </select>
    <label id="myLabel" for="mySelect"></label>
    <!-- <input type="text" ref="textBox" :value="cpInputDisplay" class="input" readonly> -->
    <input type="text" ref="textBox" value="青色    PANTONE Process BlueC" class="input" readonly>
    <label for="textBox"></label>
</div>
            </el-row>
        </div>
        <div style="width:100%;text-align: center;">
            <el-button type="primary" @click="cancelDisabled=true" v-print="printObj"
                :disabled="okDisabled">打印</el-button>
            <el-button @click="onClose" :disabled="cancelDisabled">{{cancelText}}</el-button>
        </div>
    </el-dialog>
</template>

<script>
import print from 'vue-print-nb'
import VueQr from 'vue-qr';

export default {
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        printList: {
            type: Array,
            default: () => []
        }
    }
    , components: {
        VueQr
    }
    , directives: {
        print
    }
    , data() {
        return {
            dialogVisible: this.visible
            , printDataList: []
            , printIndex: 0
            , currentPrint: null
            , okDisabled: false
            , cancelDisabled: false
            , printObj: {
                id: 'print-container'
                , preview: false
                , popTitle:'print'
                ,openCallback(vue) {
                }
                ,closeCallback(vue) {
                    vue.printNext();
                }

            }
            ,options: [{
                value: '1',
                label: '青色    PANTONE Process BlueC'
                }, {
                value: '2',
                label: '绿色    PANTONE 455C'
                }, {
                value: '3',
                label: '白色    白'
                }, {
                value: '4',
                label: '冰蓝色    PANTONE 2905C'
                }, {
                value: '5',
                label: '紫色    PANTONE 682C'
                },{
                value: '6',
                label: '橘红色    PANTONE 152C'
                }, {
                value: '7',
                label: '深黄色    PANTONE 7406C'
                }, {
                value: '8',
                label: '灰色    50%黑'
                }, {
                value: '9',
                label: '酒绿色    PANTONE 382C'
                }, {
                value: '10',
                label: '粉色    PANTONE 1765C'
                }, {
                value: '11',
                label: '金色    PANTONE 465C'
                }, {
                value: '12',
                label: '靛蓝色    PANTONE 265C'
                }
            ]
            ,selectValue:''
            , cancelText: '取消'
        }
    }
    , mounted() {
        this.dialogVisible = this.visible;
        this.printDataList = JSON.parse(JSON.stringify(this.printList));
        this.printIndex = 0;
        this.updatePrintContent();
        this.$modal.notify("在打印过程中请不要刷新或关闭此页面，以免造成打印或系统异常。");

        // 获取当前月份（1 - 12）
        const currentMonth = new Date().getMonth() + 1;

        // 根据当前月份获取对应的值
        const selectedValue = optionValues[currentMonth - 1];
        this.selectValue = "2";
        // 设置输入框的值
        this.$refs.textBox.value = selectedValue;
        // 设置下拉选择框的选中项
        this.$refs.mySelect.value = selectedValue;
    }
    , methods: {
        onClose() {
            this.dialogVisible = false;
            this.$emit('close');
        }
        , updatePrintContent() {
            this.currentPrint = this.printDataList[this.printIndex];
            this.printObj.popTitle = '打印：'+this.currentPrint.assetNo;
            this.printIndex++;
        }
        , printNext() {
            if (this.printIndex !== 0 && this.printDataList.length > 1 && this.printIndex < this.printDataList.length) {
                this.$modal.notify('准备打印第' + (this.printIndex + 1)
                    + '条数据。请点击下方【打印】按钮进行打印。');
                this.updatePrintContent();
            }else{
                this.printIndex = -1;
                this.okDisabled = true;
                this.cancelDisabled = false;
                this.cancelText = '关闭';
                this.$modal.alertPromise('打印已完成，点击确定关闭。').then(() => {
                    this.onClose();
                });
            }
        },
        // 新增 showSelectedValue 函数
        showSelectedValue(event) {
            const selectedValue = event.target.value;
            this.$refs.textBox.value = selectedValue;
        },
    }
    ,computed: {
        // 计算属性cpShowTitle
       cpShowTitle() {
           let isOver = this.printIndex===-1;
           if(isOver){
               return '打印条码：完成';
           }
           if(this.printDataList.length===1){
                return '打印条码：单个';
           }
           return '打印条码：第' + (this.printIndex) + '条，共'+(this.printDataList.length)+'条';
       }
       ,cpInputDisplay(){
            let selectOp = this.options.find(it=>it.value===this.selectValue);
            if(selectOp){
                return selectOp.label;
            }
            return '';
       }
    }
}

</script>

<style scoped>
.print-tale {
    padding: 0;
    margin: 0;
}
p{
    margin-top: 5px;
    margin-bottom: 5px;
}
div {
        text-align: center;
        font-size: 15px
    }

    .table-container {
        width: 100%; /* 设置容器宽度 */
        display: block;

    }
    table {
        margin: auto;
        border-collapse: collapse;
        width: 300px; /* 假设表格很宽，超出容器宽度 */
        table-layout: fixed; /* 固定表格布局，确保列宽度不变 */
    }
    td {
        width: 100px;  /* 固定宽度为100像素 */
        height: 20px;  /* 固定高度为50像素 */
        border: 2px solid #000; /*为了更明显地展示单元格大小*/
    }
    .td {
        width: 200px;  /* 固定宽度为200像素 */
    }
    span{
        font-size: 12px;
    }
    .dropdown{
        text-align: center;
        width: 60px;
        height: 25px;
        font-size: 15px;
        border: 1px solid #ffffff; /* 设置边框颜色和宽度 */

    }
    .input{
        text-align: center;
        width: 240px;
        font-size: 15px;
        border: 1px solid #ffffff; /* 设置边框颜色和宽度 */
    }
    .input-text{
        text-align: center;
        width: 190px;
        font-size: 15px;
        border: 1px solid #ffffff; /* 设置边框颜色和宽度 */
    }
</style>
